const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './src/index.js'),   // 入口文件
    output: {
        path: path.join(__dirname, './dist'),        // 输出目录
        filename: 'index.js'                        // 输出文件
    },
    devServer: {
        open: true,             // npm run dev后，自动打开浏览器
        host: '127.0.0.1',      // 主机地址
        port: 8080              // 端口号，默认为8080
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'   // 指定入口自定义的html文件
        })
    ],
    // eval-source-map 使"运行报错的行数"与”源代码行数“保持一致，但性能较低
    devtool: 'eval-source-map',
    module: {
        rules: [
            // url参数形式配置
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=10000' },
            // url参数options形式配置
            {
                test: /\.jpg|png|gif$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        outputPath: 'image'       // 明确指定打包生成的图片文件存放到dist目录下的image文件夹中
                    }
                }
            },
            // 字体文件
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    options: { limit: 10000 }
                }
            },
            // csv文件
            {
                test: /\.(csv|tsv)$/i,
                use: {
                    loader: 'csv-loader'
                }
            },
            // xml文件
            {
                test: /\.xml$/i,
                use: {
                    loader: 'xml-loader'
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:  "babel-loader"
            }
        ]
    },


}